<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" :class="!['MyTask','TodoTask','Notice','Message'].includes(activeData.__config__.tag)?'three-tabs':'center-tabs'">
      <el-tab-pane label="基础设置" name="field" />
      <el-tab-pane label="数据设置" name="data" v-if="!['MyTask','TodoTask','Notice','Message'].includes(activeData.__config__.tag)" />
      <el-tab-pane label="参数设置" name="size" />
    </el-tabs>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <!-- 基础设置 -->
        <el-form v-show="currentTab==='field' && showField" size="small" label-width="120px">
          <el-form-item label="标题">
            <el-input placeholder="请输入标题" v-model="activeData.title" size="small"></el-input>
          </el-form-item>
          <el-form-item  label="字号">
            <el-select
              v-model="activeData.fontSize"
              :style="{width: '100%'}" 
              @change="changeFont"
            >
            <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="设置">
            <div>
              <span class="settingBtnForColor"><el-color-picker v-model="activeData.fontColor" size="small" ></el-color-picker></span>
              <span :class="activeData.bold ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('bold')"> <img :src="boldIcon" /></span>
              <span :class="activeData.italic ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italic')"> <img :src="italicIcon" /></span>
              <span :class="activeData.underline ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underline')"> <img :src="underlineIcon" /></span>
              <span :class="activeData.textAlign == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlign','left')"><img :src="justifyLeft" /></span>
              <span :class="activeData.textAlign == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlign','center')"><img :src="justifyCenter" /></span>
              <span :class="activeData.textAlign == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlign','right')"><img :src="justifyRight" /></span>
              <span :class="activeData.heightFlag ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlag')"><img :src="lineHeight" /></span>
              <el-select
                v-model="activeData.lineHeight" class="selectStyleHeight"
                v-show="activeData.heightFlag"  @change="changeHeight"
              >
                <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <template v-if="activeData.__config__.tag==='PanelGroup'">
            <el-form-item label="图标">
              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="activeData.icon" placeholder="点击选择图标" readonly>
                  <svg-icon v-if="activeData.icon" slot="prefix" :icon-class="activeData.icon" class="el-input__icon"
                    style="height: 32px; width: 16px" />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
            <el-form-item label="图标颜色">
              <el-color-picker v-model="activeData.iconColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="图标背景色">
              <el-color-picker v-model="activeData.iconBackColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="背景色">
              <el-color-picker v-model="activeData.backColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="跳转功能">
              <el-select v-model="activeData.jumpTo" filterable style="width:100%;">
                <el-option v-for="(item, index) in superior" :key="index" :label="item.label" :value="item.value" style="width:197px;"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="activeData.__config__.componentType==='chartComponents'">
            <el-form-item label="显示背景">
              <el-switch v-model="activeData.showBgc" @change="showBgcF"></el-switch>
            </el-form-item>
            <el-form-item label="背景颜色" v-if="activeData.showBgc">
              <el-color-picker v-model="activeData.backColor" size="small"></el-color-picker>
            </el-form-item>
          </template>
          <template v-if="activeData.__config__.tag==='MyTask'">
            <el-form-item label="待办图标">
              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                <IconSelect ref="iconSelect" @selected="(name)=>{activeData.wait.icon=name}" />
                <el-input slot="reference" v-model="activeData.wait.icon" placeholder="点击选择图标" readonly>
                  <svg-icon v-if="activeData.wait.icon" slot="prefix" :icon-class="activeData.wait.icon"
                    class="el-input__icon" style="height: 32px; width: 16px" />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
            <el-form-item label="待办图标颜色">
              <el-color-picker v-model="activeData.wait.iconColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="待办图标背景色">
              <el-color-picker v-model="activeData.wait.iconBackColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="已办图标">
              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                <IconSelect ref="iconSelect" @selected="(name)=>{activeData.done.icon=name}" />
                <el-input slot="reference" v-model="activeData.done.icon" placeholder="点击选择图标" readonly>
                  <svg-icon v-if="activeData.done.icon" slot="prefix" :icon-class="activeData.done.icon"
                    class="el-input__icon" style="height: 32px; width: 16px" />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
            <el-form-item label="已办图标颜色">
              <el-color-picker v-model="activeData.done.iconColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="已办图标背景色">
              <el-color-picker v-model="activeData.done.iconBackColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="传阅图标">
              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                <IconSelect ref="iconSelect" @selected="(name)=>{activeData.view.icon=name}" />
                <el-input slot="reference" v-model="activeData.view.icon" placeholder="点击选择图标" readonly>
                  <svg-icon v-if="activeData.view.icon" slot="prefix" :icon-class="activeData.view.icon"
                    class="el-input__icon" style="height: 32px; width: 16px" />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
            <el-form-item label="传阅图标颜色">
              <el-color-picker v-model="activeData.view.iconColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="传阅图标背景色">
              <el-color-picker v-model="activeData.view.iconBackColor" size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="跳转功能">
              <el-select filterable v-model="activeData.jumpTo" disabled style="width:100%;">
                <el-option v-for="(item, index) in superior" :key="index" :label="item.label" :value="item.value" style="width:197px;"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="activeData.__config__.tag==='TodoTask'||activeData.__config__.tag==='Notice'">
             <el-form-item label="跳转功能">
               <el-select filterable v-model="activeData.jumpTo" disabled style="width:100%;" size="small">
                 <el-option v-for="(item, index) in superior" :key="index" :label="item.label" :value="item.value" style="width:197px;"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="排序字段">
               <el-select v-model="activeData.field" style="width:100%;" disabled size="small">
                <el-option label="创建时间" value="createTime" style="width:197px;"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="最大行数">
               <el-input-number v-model="activeData.maxRow" placeholder="请输入最大行数" controls-position="right" :min="1"
                 style="width:100%;" size="small"></el-input-number>
             </el-form-item>
             <el-form-item label="内容换行">
               <el-switch v-model="activeData.wrap" size="small"></el-switch>
             </el-form-item>
          </template>
          <template v-if="activeData.__config__.tag==='Message'">
             <el-form-item label="跳转功能">
               <el-select filterable v-model="activeData.jumpTo" style="width:100%;" size="small">
                 <el-option v-for="(item, index) in superior" :key="index" :label="item.label" :value="item.value" style="width:197px;"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="绑定表单">
               <el-select v-model="activeData.formName" placeholder="请选择表单" style="width:100%;" @change="getFormFields" size="small">
                 <el-option v-for="item in formOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="排序字段">
               <el-select v-model="activeData.sortField" style="width:100%;" placeholder="请选择排序字段" size="small">
                <el-option v-for="item in formFields" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="最大行数">
               <el-input-number v-model="activeData.maxRow" placeholder="请输入最大行数" controls-position="right" :min="1"
                 style="width:100%;" size="small"></el-input-number>
             </el-form-item>
             <el-divider>数据列</el-divider>
             <template v-for="(item,index) in activeData.columns">
                <el-form-item label="绑定字段">
                  <el-select v-model="item.field" style="width:100%;" placeholder="请选择绑定字段" size="small">
                    <el-option v-for="item in formFields" :key="item.value" :label="item.label" :value="item.value" style="width:197px;" :disabled="activeData.columns.filter((col)=>{return col.field === item.value}).length > 0">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="显示名称">
                  <el-input placeholder="请输入显示名称" v-model="item.name" size="small" :maxlength="15"></el-input>
                </el-form-item>
                 <el-form-item label="列宽">
                   <el-input-number v-model="item.colWidth" placeholder="请输入列宽" controls-position="right" :min="100"
                     style="width:100%;"></el-input-number>
                 </el-form-item>
                <el-form-item label="对齐方式">
                  <el-select v-model="item.align" style="width:100%;" placeholder="请选择对齐方式">
                    <el-option label="左对齐" value="left"></el-option>
                    <el-option label="居中对齐" value="center"></el-option>
                    <el-option label="右对齐" value="right"></el-option>
                  </el-select>
                </el-form-item>
                 <el-form-item label="排序">
                   <el-input-number v-model="item.sortId" placeholder="请输入排序" controls-position="right" :min="0"
                     style="width:100%;"></el-input-number>
                 </el-form-item>
                  <div style="textAlign:center;marginBottom:10px;">
                   <el-button type="danger" size="small" @click="delColumn(index)" circle icon="el-icon-close"></el-button>
                  </div>
             </template>
             <div style="marginBottom:10px;">
               <el-button type="primary" size="small" @click="addColumn">添加列</el-button>
             </div>
          </template>
        </el-form>
        <!-- 数据设置 -->
        <el-form v-show="currentTab === 'data' && showField" size="small" label-width="120px">
          <template v-if="activeData.__config__.tag==='PanelGroup'">
            <el-form-item label="数据库表">
              <el-select placeholder="请选择数据库表" filterable v-model="activeData.tableName" size="small" @change="()=>{activeData.field=''}" style="width:100%;">
                <el-option v-for="item in tableOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="显示字段">
              <el-select placeholder="请选择显示字段" filterable v-model="activeData.field" size="small" style="width:100%;" @change="selectSumType">
                <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计算方式">
              <el-select placeholder="请选择计算方式" v-model="activeData.method" size="small" style="width:100%;">
                <el-option v-for="item in sumTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位">
              <el-input placeholder="请输入单位" v-model="activeData.unit" size="small"></el-input>
            </el-form-item>
          </template>
          <template v-if="activeData.__config__.tag==='QuickMenu'">
            <template v-for="(item,index) in activeData.menus">
              <el-form-item label="功能名称">
                <el-input placeholder="请输入功能名称" v-model="item.funcName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                  <IconSelect ref="iconSelect" @selected="selectedMenu" />
                  <el-input slot="reference" v-model="item.icon" placeholder="点击选择图标" readonly
                    @focus="()=>{currentIndex = index}">
                    <svg-icon v-if="item.icon" slot="prefix" :icon-class="item.icon" class="el-input__icon"
                      style="height: 32px; width: 16px" />
                    <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                  </el-input>
                </el-popover>
              </el-form-item>
              <el-form-item label="图标颜色">
                <el-color-picker v-model="item.iconColor" size="small"></el-color-picker>
              </el-form-item>
              <el-form-item label="图标背景色">
                <el-color-picker v-model="item.iconBackColor" size="small"></el-color-picker>
              </el-form-item>
              <el-form-item label="背景色">
                <el-color-picker v-model="item.backColor" size="small"></el-color-picker>
              </el-form-item>
              <el-form-item label="跳转功能">
                <el-select filterable v-model="item.jumpTo" style="width:100%;">
                  <el-option v-for="(item,idx) in superior" :key="idx" :label="item.label" :value="item.value" style="width:197px;"></el-option>
                </el-select>
              </el-form-item>
               <el-form-item label="排序">
                  <el-input-number placeholder="请输入宽度" v-model="item.sortId" size="small" :min="0"  controls-position="right" ></el-input-number>
              </el-form-item>
               <div style="textAlign:center;marginBottom:10px;">
                 <el-button type="danger" size="small" @click="delMenu(index)" circle icon="el-icon-close"></el-button>
               </div>
            </template>
             <div style="marginBottom:10px;">
              <el-button type="primary" size="small" @click="addMenu">添加功能</el-button>
             </div>
          </template>
          <template v-if="['BarChart','LineChart','AreaChart'].includes(activeData.__config__.tag)">
            <el-form-item label="数据坐标">
              <el-radio-group v-model="activeData.dataCoordinate">
                <el-radio label="Y轴"></el-radio>
                <el-radio label="X轴"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="数据选项">
              <el-select filterable
                placeholder="请选择数据表"
                v-model="activeData.tableName"
                size="small"
                @change="()=>{activeData.xField='';activeData.yField=''}"
              >
                <el-option v-for="item in tableOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="X轴值">
              <el-select placeholder="请选择字段" v-model="activeData.xField" size="small" @change="getCName($event,'name')">
                <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Y轴值">
              <el-select placeholder="请选择字段" v-model="activeData.yField" size="small" @change="getCName($event,'data')">
                <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="跳转功能">
              <el-select filterable v-model="activeData.jumpTo" style="width:100%;">
                <el-option v-for="(item, idx) in superior" :key="idx" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="['PieChart','GaugeChart','RingChart'].includes(activeData.__config__.tag)">
            <el-form-item label="数据选项">
              <el-select filterable
                placeholder="请选择数据表"
                v-model="activeData.tableName"
                size="small"
                @change="()=>{activeData.nameField='';activeData.dataField='',activeData.columns=[]}"
              >
                <el-option v-for="item in tableOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名称值">
              <el-select placeholder="请选择字段" filterable v-model="activeData.nameField" size="small" @change="getCName($event,'name')">
                <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="显示值">
              <el-select filterable placeholder="请选择字段" v-model="activeData.dataField" size="small" @change="getCName($event,'data')">
                <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="跳转功能">
              <el-select filterable v-model="activeData.jumpTo" style="width:100%;">
                <el-option v-for="(item, index) in superior" :key="index" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="activeData.__config__.tag==='RaddarChart'">
            <el-form-item label="数据选项">
              <el-select filterable
                placeholder="请选择数据表"
                v-model="activeData.tableName"
                size="small"
                @change="()=>{activeData.nameField='';activeData.dataField='',activeData.columns=[]}"
              >
                <el-option v-for="item in tableOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名称值">
              <el-select placeholder="请选择字段" filterable v-model="activeData.nameField" size="small" @change="getAxisData($event,'name')">
                <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="显示值">
              <el-select filterable placeholder="请选择字段" v-model="activeData.dataField" size="small" @change="getAxisData($event,'data')">
                <el-option v-for="item in fieldOption" :key="item.value" :label="item.label" :value="item.value" style="width:197px;">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="跳转功能">
              <el-select filterable v-model="activeData.jumpTo" style="width:100%;">
                <el-option v-for="(item, idx) in superior" :key="idx" :label="item.label" :value="item.value" style="width:197px;"></el-option>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">数据列</el-divider>
            <template v-for="(item,index) in activeData.columns">
              <el-form-item label="指标名称">
                <el-input placeholder="请输入指标名称" v-model="item.name" size="small"></el-input>
              </el-form-item>
              <el-form-item label="维度最大值">
                <el-input-number placeholder="请输入维度最大值" v-model="item.max"  controls-position="right"
                  style="width:100%;"></el-input-number>
              </el-form-item>
              <div style="textAlign:center;marginBottom:20px;">
                <el-button type="danger" size="small" @click="delRadderColumn(index)" circle icon="el-icon-close"></el-button>
              </div>
            </template>
          </template>
        </el-form>
        <!-- 参数设置 -->
        <el-form v-show="currentTab === 'size' && showField" size="small" label-width="120px">
          <el-form-item label="宽度">
            <el-input-number placeholder="请输入宽度" v-model="activeData.width" size="small" :min="50"  controls-position="right" ></el-input-number>
            px
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number placeholder="请输入高度" v-model="activeData.height" size="small" :min="50" controls-position="right" ></el-input-number>
            px
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>

  import {
    isArray
  } from 'util'
  import TreeNodeDialog from './TreeNodeDialog'
  import {
    isNumberStr
  } from '@/utils/index'
  import IconsDialog from './IconsDialog'
  import {
    inputComponents,
    selectComponents,
    layoutComponents
  } from '@/components/generator/config'
  import {
    saveFormConf
  } from '@/utils/db'
  import draggable from 'vuedraggable'
  import IconSelect from "@/components/IconSelect";
  import {
    listchoose,  //最新查库表名接口---数据源管理中查询
    sourceTestList,  //最新基于库表名查字段接口
    getChartData
  } from '@/api/custom/portalDesigner'
  import {
    getPageRelease
    } from "@/api/custom/formPoster";
     import {
     getFormInfo
     } from '@/api/custom/formDesigner'
  import {
  listMenu
  } from "@/api/system/menu";
  import boldIcon from '@/assets/images/bold_icon.png'
  import italicIcon from '@/assets/images/italic.png'
  import underlineIcon from '@/assets/images/underline.png'
  import justifyLeft from '@/assets/images/justifyLeft.png'
  import justifyCenter from '@/assets/images/justifyCenter.png'
  import justifyRight from '@/assets/images/justifyRight.png'
  import lineHeight from '@/assets/images/lineHeight.png'
  // 使changeRenderKey在目标组件改变时可用
  const needRerenderList = ['tinymce']

  export default {
    components: {
      TreeNodeDialog,
      IconsDialog,
      draggable,
      IconSelect
    },
    props: ['showField', 'activeData'],
    data() {
      return {
        currentTab: 'field', //当前tab页
        currentIndex: null, //当前索引
        tableOption: [], //表选项
        fieldOption: [], //字段选项
        formFields: [], //表单字段选项，显示名为：英文_中文
        formOption: [], //表单选项
        loading: false,
        superior: [], //菜单选项
        sumTypeList:[
          {label:'求和',value:'SUM'},
          {label:'最大值',value:'MAX'},
          {label:'最小值',value:'MIN'},
          {label:'平均数',value:'AVG'}
        ],
        boldIcon,
        italicIcon,
        underlineIcon,
        justifyLeft,
        justifyCenter,
        justifyRight,
        lineHeight,
        fontSize: [
          {label: '10px',val: '10px'},
          {label: '11px',val: '11px'},
          {label: '12px',val: '12px'},
          {label: '13px',val: '13px'},
          {label: '14px',val: '14px'},
          {label: '15px',val: '15px'},
          {label: '16px',val: '16px'},
          {label: '18px',val: '18px'},
          {label: '20px',val: '20px'},
          {label: '24px',val: '24px'},
          {label: '30px',val: '30px'},
          {label: '36px',val: '36px'},
          {label: '48px',val: '48px'},
          {label: '60px',val: '60px'},
          {label: '72px',val: '72px'},
          {label: '84px',val: '84px'},
          {label: '96px',val: '96px'},
          {label: '108px',val: '108px'},
          {label: '120px',val: '120px'},
        ]
      }
    },
    computed: {
      activeTag() {
        return this.activeData.__config__.tag
      }
    },
    watch: {
      'activeData.tableName': { //表名改变
        handler() {
          this.getAllFields(this.activeData.tableName) //根据表名获取表字段
        },
        immediate:true
      },
      'activeData.__config__.tag': { //组件改变
        handler(val) {
          if (val === 'Message') {  //消息列表
            this.formField = []
            if(this.activeData.formName) {
            //获取表单详情，更新表单字段选项
            getFormInfo(this.activeData.formName).then((res) => {
            if (res.code === 0) {
               this.activeData.table = res.data.tableName
               let fields = JSON.parse(res.data.formJsonData).data
               this.formFields = fields.map((item) => {
                 return {
                   label: `${item.name}_${item.desc}`,
                   value: item.name
                 }
               })
               this.formFields.push({
                 label: 'create_time_创建日期',
                 value: 'create_time'
               })
            }
          }).catch(e => console.log(e))
        }
          }
          this.currentTab = 'field'  //切换为基础设置tab页
        },
        immediate:true
      },
    },
    mounted() {
      this.getMenus() //获取菜单
      this.getAllTables() //获取所有表
      this.getAxisData()
    },
    methods: {
      //标题字体样式
      fonttext(data,position) {
        this.$set(this.activeData,data,position );
      },
      fontStyle(data) {
        this.activeData[data] = !this.activeData[data] 
        this.$set(this.activeData,data,this.activeData[data] );
      },
      changeFont(val){
        this.$set(this.activeData,'fontSize',val);
      },
      changeHeight(val) {
         this.$set(this.activeData,'lineHeight',val);
      },
      //是否显示背景
      showBgcF(value){
        if(!value){
          this.activeData.backColor = '#ffffff'
        }
      },

      //获取中文名   change函数
      getCName(val,axis){
        let field = this.fieldOption.filter((item)=>{
          return item.value === val
        })
        if(axis==='name'){
          if(this.activeData.__config__.tag==='GaugeChart'){
            this.activeData.dataField =''
          }
          this.activeData.CNameField = field[0].name
        }else{
          this.activeData.CDataField= field[0].name
        }
      },
      //获取名称值/显示值数据的change函数
      getAxisData(val,axis){
        if (!val) {
          if(this.activeData.__config__.tag==='RaddarChart'){
            this.activeData.columns =[]
          }
        } else {
          let field = this.fieldOption.filter((item)=>{
            return item.value === val
          })
          if(axis==='name'){
            this.activeData.CNameField = field[0].name
          }else{
            this.activeData.CDataField= field[0].name
          }
          let params = {
            tableName: this.activeData.tableName,
            fieldNameX: this.activeData.nameField,
            fieldNameY:this.activeData.dataField
          };
          if(this.activeData.tableName&&this.activeData.nameField&&this.activeData.dataField){
            getChartData(params)
              .then((res) => {
                if (res.code === 0) {
                  console.log(res.data)
                  this.activeData.Ydata = res.data.Y,
                  this.activeData.columns = res.data.X.map((item,index)=>{
                      return(
                        {
                          id:index,
                          name:item,
                          oldName:item,
                          max:res.data.Y[index]
                        }
                      )
                  })
                }
              })
              .catch((e) => console.log(e));
          }
        }
      },

      // 选择图标
      selected(name) {
        this.activeData.icon = name;
      },
      //选择快捷菜单图标
      selectedMenu(name) {
        this.activeData.menus[this.currentIndex].icon = name;
      },
      //获取菜单
      getMenus() {
        this.superior = [{
          label:'默认页',
          value:0
        }]
        listMenu().then(res=>{
          res.data.map((item)=>{
             if (item.type === 2) {
               this.superior.push({
                 label:item.name,
                 value:item.id
               })
             }
          })
        })
      },
      //获取所有表
      getAllTables() {
        listchoose().then((res) => {
          if (res.code === 0) {
            this.tableOption = res.data.map((item,index)=>{
              return(
                {
                  label:item.name,
                  value:item.id
                }
              )
            })
            this.formOption = res.data.map((item,index)=>{
              return {
                label:item.name,
                value:item.id
              }
            })
          }
        }).catch(e => {
          console.log(e);
        })
      },
      //根据表名获取表字段
      getAllFields(name) {
        if (!name) {
          this.fieldOption = []
        } else {
          let params = {
            id: name
          }
          if (this.activeData.__config__.tag === 'PanelGroup') { //数据面板
            params.type = 'number'  //需计算，仅返回数字类型的字段
          }
          sourceTestList(params).then((res) => {
            if (res.code === 0) {
              this.fieldOption = res.data?.columns.map((item) => {
                return {
                  label: item.name,
                  value: item.name,
                  name:item.name,
                  columnType:item.type
                }
              })
            }
          }).catch(e => console.log(e))
        }
      },
      //根据表单id获取表字段
      getFormFields(id) {
        this.activeData.sortField = ''
        this.formFields = []
        this.activeData.columns = []
        if(id) {
          getFormInfo(id).then((res) => {
            if (res.code === 0) {
               this.activeData.table = res.data.tableName
               let fields = JSON.parse(res.data.formJsonData).data
               this.formFields = fields.map((item) => {
                 return {
                   label: `${item.name}_${item.desc}`,
                   value: item.name
                 }
               })
               this.formFields.push({
                 label: 'create_time_创建日期',
                 value: 'create_time'
               })
            }
          }).catch(e => console.log(e))
        }
      },
      //添加快捷菜单
      addMenu() {
        this.activeData.menus.push({
          funcName: '功能名称',
          icon: 'cascader',
          iconColor: '#409eff',
          iconBackColor: '#ffffff',
          backColor: '#ffffff',
          jumpTo: 0,
          sortId: 0
        })
      },
      //删除快捷菜单
      delMenu(index) {
        this.activeData.menus.splice(index, 1)
      },
      //添加信息列表列
      addColumn() {
        this.activeData.columns.push({
          name: '',
          field: '',
          colWidth: 100,
          align: 'center',
          sortId: 0
        })
      },
      //删除信息列表列
      delColumn(index) {
        this.activeData.columns.splice(index, 1)
      },
      //删除雷达图数据列
      delRadderColumn(index) {
        this.activeData.columns.splice(index, 1)
      },
      selectSumType(val){
        let str = this.fieldOption.find(info=>{
          return info.value === val;
        }).columnType;
        this.activeData.method = '';
        this.activeData.columnType = str;
        if(str.indexOf('NUMERIC')>-1){
         this.sumTypeList = [
          {label:'求和',value:'SUM'},
          {label:'最大值',value:'MAX'},
          {label:'最小值',value:'MIN'},
          {label:'平均数',value:'AVG'}
         ];
        }else{
          this.sumTypeList = [
          {label:'求和',value:'SUM'},
          {label:'去重',value:'REM'}
         ];
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  .settingBtn{
    display: inline-block;
    width: 23px;
    height: 23px;
    line-height: 23px;
    padding: 3px;
    border-radius: 2px;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
  }
  .settingBtnForColor{
    display: inline-block;
    line-height: 18px;
    vertical-align: middle;
  }
  .right-board {
    width: 350px;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 3px;

    .field-box {
      position: relative;
      height: calc(100vh - 42px);
      box-sizing: border-box;
      overflow: hidden;
    }

    .el-scrollbar {
      height: 100%;
    }
    .box-card {
      border: 1px solid red;
      margin-top: 20px;
      height: 20%;
      padding-top: 5%;
      width:105%;
      // .box-form {
      //   width: 100%;
      //   padding-right: 0px;
      //   border: 1px solid red;
      // }
    }
  }

  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input+.el-input {
      margin-left: 4px;
    }
  }

  .select-item+.select-item {
    margin-top: 4px;
  }

  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
  }

  .option-drag {
    cursor: move;
  }

  .time-range {
    .el-date-editor {
      width: 227px;
    }

    ::v-deep .el-icon-time {
      display: none;
    }
  }

  .document-link {
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    top: 0;
    left: 0;
    cursor: pointer;
    background: #409eff;
    z-index: 1;
    border-radius: 0 0 6px 0;
    text-align: center;
    line-height: 26px;
    color: #fff;
    font-size: 18px;
  }

  .node-label {
    font-size: 14px;
  }

  .node-icon {
    color: #bebfc3;
  }

  /* 选项卡相关 */
  .tabs-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    .close-btn {
      cursor: pointer;
      color: #f56c6c !important;
    }

    +.tabs-item {
      margin-top: 4px;
    }

    .tabs-line-icon {
      line-height: 32px;
      font-size: 22px;
      padding: 0 4px;
      color: #777;
    }

    .option-drag {
      cursor: move;
    }
  }

</style>
<style lang="scss" scoped>
  .tab-center2 {
    .el-tabs__nav-wrap {
      .el-tabs__nav .is-top {
        transform: translateX(20%) !important;
      }
    }
  }

</style>
